<template>
  <Jsonld :schema="schema"></Jsonld>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
import { storeToRefs } from 'pinia'
import { useNavStore } from '@/store/nav'
import { TAB_NAMES as HOME_TAB_NAMES, TAB_TYPE as HOME_TAB_TYPE } from '@/constant/home'
import { TAB_NAMES as SEARCH_TAB_NAMES, TAB_TYPE as SEARCH_TAB_TYPE } from '@/constant/search'
import Jsonld from './Jsonld.vue'

const navStore = useNavStore()
const { atForyouTab, atFollowTab, atSearchTab } = storeToRefs(navStore)

const schema = ref(null)
function updateSchema() {
  const path = atForyouTab.value
    ? HOME_TAB_NAMES[HOME_TAB_TYPE.FORYOU]
    : atFollowTab.value
    ? HOME_TAB_NAMES[HOME_TAB_TYPE.FOLLOW]
    : atSearchTab.value
    ? SEARCH_TAB_NAMES[SEARCH_TAB_TYPE.SEARCH]
    : null

  if (path) {
    schema.value = {
      '@context': 'https://schema.org',
      '@type': 'WebSite',
      name: 'Fantasi',
      url: `${import.meta.env.VITE_APP_URL}/${path}`,
      potentialAction: {
        '@type': 'SearchAction',
        target: {
          '@type': 'EntryPoint',
          urlTemplate: `${import.meta.env.VITE_APP_URL}/search?keyword={search_term_string}`,
        },
        'query-input': 'required name=search_term_string',
      },
    }
  } else {
    schema.value = null
  }
}

watchEffect(updateSchema)
</script>
